<template>
  <!-- 日期模块 -->
  <el-row>
    <el-col :span="24">
      <div class="date">
        <el-date-picker
          v-model="time"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00']"
        >
        </el-date-picker>
      </div>
    </el-col>
  </el-row>
  <!-- 企业账号 -->
  <el-row>
    <el-col :span="13">
      <div class="grid-content">
        <h3 class="m-b-20">企业账号数</h3>
        <div ref="accountData" style="width: 100%;height: 400px"></div>
      </div>
    </el-col>
    <el-col :span="11">
      <el-row gutter="20">
        <el-col :span="8">
          <div class="bg-white p-20" style="height: 200px">
            <h3>转化成功数</h3>
            <label class="num">7</label>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="bg-white p-20" style="height: 200px">
            <h3>期间质检文件类型</h3>
            <div ref="fileTypeData" style="width: 100%;height: 160px"></div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="bg-white p-20 m-t-20" style="height: 250px">
            <h3>期间质检文件类型</h3>
            <div ref="fileNumData" style="width: 100%;height: 210px"></div>
          </div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <div class="model">
        <el-radio-group v-model="accountType">
          <el-radio-button label="全部账号"></el-radio-button>
          <el-radio-button label="正式"></el-radio-button>
          <el-radio-button label="正式(体验)"></el-radio-button>
        </el-radio-group>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <div class="workNum">
        <h3>期间使用业务数</h3>
        <label class="num">12</label>
        <div class="TOP5">
          <span> 执行次数 TOP5 </span>
        </div>
        <div class="tableData">
          <template>
            <el-table
              :data="worktableData"
              height="200"
              border
              style="width: 100%"
            >
              <el-table-column prop="rank" label="排名" width="180">
              </el-table-column>
              <el-table-column prop="taskname" label="业务名" width="180">
              </el-table-column>
              <el-table-column prop="Coname" label="企业"> </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
    </el-col>
    <el-col :span="12">
      <div class="taskNum">
        <h3>期间使用任务数</h3>
        <label class="num">12</label>
        <div class="TOP5">
          <span> 执行次数 TOP5 </span>
        </div>
        <div class="tableData">
          <template>
            <el-table :data="tasktableData" height="200" style="width: 100%">
              <el-table-column prop="rank" label="排名" width="180">
              </el-table-column>
              <el-table-column prop="taskname" label="业务名" width="180">
              </el-table-column>
              <el-table-column prop="Coname" label="企业"> </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <div class="qualityNum">
        <h3 class="m-b-20">期间使用质检规则数</h3>
        <div ref="ruleNum" style="width: 100%;height: 300px"></div>
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from "vue";
import { getAccountCharts, getFileNumCharts, getFileTypeCharts, getRuleNum } from "./renderCharts"
import * as echarts from "echarts";
export default defineComponent({
  setup() {
    let time = ref(null);
    let accountType = ref(null);
    // 表格
    const worktableData = reactive([])
    const tasktableData = reactive([])
    // 图表
    const accountData = ref();
    const fileTypeData = ref();
    const fileNumData = ref()
    const ruleNum = ref()
    onMounted(() => {
      // 企业账号数
      getAccountCharts(accountData.value)
      getFileTypeCharts(fileTypeData.value)
      getFileNumCharts(fileNumData.value)
      getRuleNum(ruleNum.value)
    });
    return { accountData, time, accountType, fileTypeData, fileNumData, worktableData, tasktableData, ruleNum };
  }
});
</script>

<style lang="scss" scoped>
.date {
  padding-left: 20px;
  line-height: 80px;
  margin-bottom: 20px;
  height: 80px;
  background-color: white;
}

.grid-content {
  background-color: white;
  margin-right: 15px;
  height: 470px;
  box-sizing: border-box;
  padding: 10px;
}

.num {
  font-size: 30px;
  color: #175594;
  margin-right: 15px;
}

.model {
  margin-top: 15px;
  height: 70px;
  background-color: white;
  padding-left: 30px;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.workNum {
  background-color: white;
  height: 300px;
  margin-right: 15px;
  padding: 15px;
  .TOP5 {
    margin: 0 auto;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    width: 160px;
    height: 40px;
    background-color: #175594;
    color: white;
  }
}
.taskNum {
  background-color: white;
  height: 300px;
  padding: 15px;
  .TOP5 {
    margin: 0 auto;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    width: 160px;
    height: 40px;
    background-color: #175594;
    color: white;
  }
}
.qualityNum {
  margin-top: 15px;
  background-color: white;
  padding: 15px;
}
</style>
